<script setup>
import { storeToRefs } from 'pinia'
import { useWeatherStore } from '@/stores/weather.js'
const { allWeatherData, option } = storeToRefs(useWeatherStore())
</script>

<template>
    <div class="bg-weather-secondary px-12 pt-10 mt-2 rounded">
      <div class="flex gap-6">
        <div
          class="flex flex-col flex-1 text-center gap-4"
          v-for="(item, index) in allWeatherData"
          :key="item.date"
        >
          <span> {{ index == 0 ? '今天' : index == 1 ? '明天' : item.weekDay }}</span>
          <span>{{ item.date.slice(-5) }}</span>
          <span>{{ item.dayweather }}</span>
          <span>风力{{ item.nightpower }}级</span>
        </div>
      </div>
  
      <div
        class="weathercanvas h-40 mt-10"
        style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0)"
      >
        <div
          style="
            position: relative;
            height: 180px;
            padding: 0px;
            margin: 0px;
            border-width: 0px;
            cursor: default;
          "
        >
          <v-chart :option="option"></v-chart>
        </div>
      </div>
    </div>
  </template>
  
  <style lang="scss"></style>
  